<template>
	<a-card>
		<a-row type="flex" align="left" :gutter="[16, 16]">
			<a-col :span="24">
				<a-space>
					<a-button type="primary" @click="addAccount">
						<template #icon><PlusOutlined /></template>
						新增
					</a-button>

					<a-button
						type="danger"
						:disabled="!selectedlist.length"
						@click="delectAll"
					>
						<template #icon><DeleteOutlined /></template>
						批量删除
					</a-button>
				</a-space>
			</a-col>

			<a-col :span="24">
				<a-table
					:columns="columns"
					:dataSource="dataSource"
					:pagination="pagination"
					:row-selection="rowSelection"
					@change="handleTableChange"
					:rowKey="
						(record, index) => {
							return record.id
						}
					"
					:scroll="{ x: 'calc(700px + 50%)' }"
				>
					<template #status="{ record }">
						<SWITCH
							:status="record.status == 0 ? false : true"
							:data="record"
							@changeSwitch="changeSwitch"
						/>
					</template>
					<template #pic="{ record }">
						<a-avatar shape="square" size="large" :src="record.picture">
						</a-avatar>
					</template>
					<template #operate="{ record }">
						 
						<a-space>
							<a-button type="link"   @click="handleEdit(record)"
								>编辑</a-button
							>
							<a-popconfirm
								title="是否确定删除？"
								ok-text="是"
								cancel-text="否"
								@confirm="handelDelet([record.id])"
							>
								<a-button  type="link" danger>删除</a-button>
							</a-popconfirm>
						</a-space>
					</template>
				</a-table>
			</a-col>
		</a-row>
		<BANNER
			v-if="visible"
			:visible="visible"
			:model="model"
			:title="title"
			@close-modal="handleCancel"
			@ok="handleOk"
		/>
	</a-card>
</template>
<script>
import { cloneDeep } from 'lodash-es'
import {
	defineComponent,
	reactive,
	ref,
	computed,
	onMounted,
	getCurrentInstance,
	createVNode
} from 'vue'
import { useStore } from 'vuex'
import {
	bannerList,
	updateBannerStatus,
	addBanner,
	updateBanner,
	delBanner
} from '/@/api/app.js'
import { message,Modal } from 'ant-design-vue'
import { PlusOutlined, DeleteOutlined ,ExclamationCircleOutlined} from '@ant-design/icons-vue'
import { SWITCH } from '/@/components'
import BANNER from './modules/Banner.vue'
const columns = [
	{
		title: '商品名称',
		dataIndex: 'name',
		key: 'name',
		align: 'center'
	},
	{
		title: '商品图片',
		dataIndex: 'img',
		key: 'img',
		slots: {
			customRender: 'pic'
		},
		align: 'center'
	},
	{
		title: '更新时间',
		dataIndex: 'create_time',
		key: 'create_time',
		align: 'center'
	},

	{
		title: '状态',
		dataIndex: 'status',
		key: 'status',
		slots: { customRender: 'status' },
		align: 'center'
	},
	{
		title: '操作',
		dataIndex: 'operate',
		key: 'operate',
		slots: { customRender: 'operate' },
		align: 'center'
	}
]

export default defineComponent({
	components: {
		SWITCH,
		PlusOutlined,
		DeleteOutlined,
		BANNER
	},
	setup() {
		const store = useStore()
		const model = ref({})
		const dataSource = ref([])
		const { proxy } = getCurrentInstance()
		const showUrl = ref('')
		const editableData = reactive({})
		const value = ref(null)
		const loading = ref(false)
		const current = ref(1)
		const pageSize = ref(10)
		const total = ref(0)
		const title = ref('')
		const visible = ref(false)
		const selectedlist = ref([])
		const pagination = computed(() => ({
			current: current.value * 1,
			pageSize: pageSize.value * 1,
			'show-size-changer': false,
			pageSizeOptions: ['10', '20', '50'],
			total: total //总条数
		}))
		const formRef = ref()
		const formState = reactive({})

		const layout = {
			labelCol: {
				style: {
					width: '80px',
					float: 'left',
					textAlign: 'center'
				}
			},
			wrapperCol: {
				span: 16
			}
		}

		const handleCancel = () => {
			visible.value = false
		}
		const handleFinish = (values) => {
			current.value = 1
			refalsh()
		}

		const handleFinishFailed = (errors) => {
			console.log(errors)
		}
		const handelDelet = (n) => {
			delBanner(n)
				.then((res) => {
					message.success('删除成功')
					refalsh()
				})
				.catch(() => {})
		}
		const resetForm = () => {
			formState.username = ''
			formState.status = undefined
			getbannerList({
				page: 1,
				pagesize: pageSize.value
			})
		}
		const addAccount = () => {
			visible.value = true
			model.value.edit = false
			title.value = '新增banner'
		}
		const handleEdit = (n) => {
			console.log(n)
			visible.value = true
			model.value = n
			model.value.edit = true
			model.value.showUrl = showUrl.value
			title.value = '编辑banner'
			console.log(model.value)
		}
		const handleTableChange = (page, filters, sorter) => {
			const { current: pagenum, pageSize: pagesize } = page
			current.value = pagenum * 1
			pageSize.value = pagesize * 1
			refalsh()
		}

		const getbannerList = (params) => {
			dataSource.value=[];
			bannerList(params)
				.then((res) => {
					const {
						code,
						message,
						result: { list, count, show_url }
					} = res

					dataSource.value =list
					total.value = count
				})
				.catch(() => {})
		}

		const handleOk = (n) => {
			const {
				values: { name, picture, activetime, sort,status, datetime ,url},
				model: { edit, id }
			} = n

			var params = {}
			// if (activetime == 0) {
			// 	params.is_effect = 0
			// } else {
			// 	params.is_effect = 1
			// 	params.start_time = proxy.$formate(datetime[0]._d)
			// 	params.end_time = proxy.$formate(datetime[1]._d)
			// }
      //       params.url=url;
			params.name = name
		  params.sort = sort
			params.picture = picture 
			params.status = status * 1
			console.log(params)
			if (!edit) {
				// 新增
				addBanner(params)
					.then((res) => {
						message.success('新增成功')
						visible.value = false
						refalsh()
					})
					.catch(() => {})
			} else {
				params.id = id
				updateBanner(params)
					.then((res) => {
						message.success('编辑成功')
						visible.value = false
						refalsh()
					})
					.catch(() => {})
			}
		}
		const changeSwitch = (n) => {
			const {
				data: { id },
				status
			} = n
			updateBannerStatus({
				id,
				status: status ? 1 : 0
			})
				.then((res) => {
					message.success('状态修改成功')
					refalsh()
				})
				.catch(() => {})
		}
		const refalsh = () => {
			getbannerList({
				username: formState.username,
				status: formState.status,
				page: current.value * 1,
				pagesize: pageSize.value * 1
			})
		}
		const rowSelection = ref({
			checkStrictly: false,
			onChange: (selectedRowKeys, selectedRows) => {
				console.log(
					`selectedRowKeys: ${selectedRowKeys}`,
					'selectedRows: ',
					selectedRows
				)
			},
			onSelect: (record, selected, selectedRows) => {
				selectedlist.value = selectedRows
			},
			onSelectAll: (selected, selectedRows, changeRows) => {
				if (selected) {
					selectedlist.value = selectedRows
				} else {
					selectedlist.value = []
				}
			}
		})
		const delectAll = () => {
			Modal.confirm({
				title:   '是否确定删除?',
				icon: () => createVNode(ExclamationCircleOutlined),

				okText: '是的',
				okType: 'danger',
				cancelText: '取消',

				onOk() {
					var ids = []
					selectedlist.value.length &&
						selectedlist.value.map((item) => {
							ids.push(item.id)
						})
					handelDelet(ids)
				},

				onCancel() {
					console.log('Cancel')
				}
			})
		}

		onMounted(() => {
			refalsh()
		})
		return {
			formState,
			formRef,
			layout,
			visible,
			title,
			model,
			showUrl,
			addAccount,
			handelDelet,
			handleFinishFailed,
			handleFinish,
			resetForm,
			dataSource,
			pagination,
			value,
			total,
			loading,
			current,
			pageSize,
			columns,
			editingKey: '',
			editableData,
			handleTableChange,
			getbannerList,
			changeSwitch,
			handleCancel,
			handleOk,
			refalsh,
			rowSelection,
			handleEdit,
			selectedlist,
			delectAll
		}
	}
})
</script>
<style scoped>
.editable-row-operations a {
	margin-right: 8px;
}
.ttt{display: block;}

</style>